<template>
    <div>
        <Modal v-model="tag_active" @on-ok="handleTagSubmit()" title="添加标签">
            <span>标签名:</span>
            <Input type="text" size="large" v-model="addTag" style="width: 400px;" />
        </Modal>
        <Tag v-for="t in tags" @on-close="handleDeleteTag(t)" closable> {{ t }}</Tag>
        <Button icon="ios-add" type="dashed" size="small" @click="handleAddTag()">添加标签</Button>
    </div>
</template>
<script>
export default {
    name: "TagInput",
    props: ["tag_str", "label"],
    data() {
        return {
            tag_active: false,
            tags: [],
            addTag: "",
        }
    },
    methods: {
        handleDeleteTag(t) {//删除tag
            this.tags = this.tags.filter((tag) => { return tag != t; });
            this.renewTagStr();
        },
        handleAddTag() {//激活addTagModal
            this.tag_active = true;
            this.addTag = "";//重置addTagData
        },
        handleTagSubmit() {//addTagModal界面提交tag
            if (!(this.addTag in this.tags || this.addTag == "")) {
                this.tags.push(this.addTag);
                this.renewTagStr();
            }
        },
        renewTags() {
            if (this.tag_str == undefined || this.tag_str == null) this.tags = [];
            else this.tags = this.tag_str.split(',');
        },
        renewTagStr() { this.$emit('returnData', this.tags.join(","), this.label); }
    },
    created() { this.renewTags(); },
    watch: {
        tag_str(newValue, oldValue) { this.renewTags(); }
    }
}
</script>